<template>
  <div class="app-container">
    <el-row class="mb8 group-title"><el-col :span="24"><div>流量包管理</div></el-col></el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['car:package:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="packageList" :height="maxTableHeight">
      <el-table-column label="ID" align="center" prop="id"  width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="流量包名称" align="center" prop="packageName"  width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="图标" align="center" prop="icon" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <oss-image-preview v-if="scope.row.icon" :src="scope.row.icon" :width="40" :height="40"/>
        </template>
      </el-table-column>
      <el-table-column label="流量包内容" align="center" prop="packageContent" width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="价格" align="center" prop="packagePrice" width="130" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{$yun.priceFormatter(scope.row.packagePrice)}}
        </template>
      </el-table-column>
      <el-table-column label="赠送幅度" align="center" prop="giftData" width="100" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['car:package:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['car:package:remove']"
          >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
<!--    套餐包管理-->
    <el-row class="mb8 group-title"><el-col :span="24"><div style="padding-top: 20px;">套餐包管理</div></el-col></el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddMenu"
          v-hasPermi="['car:package:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loadingMenu" :data="menuPackageList" :height="maxTableHeight">
      <el-table-column label="ID" align="center" prop="id"  width="190" :show-overflow-tooltip="true"/>
      <el-table-column label="套餐包名称" align="center" prop="packageName"  width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="图标" align="center" prop="icon" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <oss-image-preview v-if="scope.row.icon" :src="scope.row.icon" :width="40" :height="40"/>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center" prop="packagePrice" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{$yun.priceFormatter(scope.row.packagePrice)}}
        </template>
      </el-table-column>
      <el-table-column label="流量包内容" align="center" prop="packageContent" width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="scope.row.packageContent">流量{{scope.row.packageContent}}MB</div>
          <div v-if="scope.row.deliveryHomepage">{{scope.row.deliveryHomepage}}次带货首页推荐</div>
          <div v-if="scope.row.offStationPlatform">{{scope.row.offStationPlatform}}站外平台推荐</div>
          <div v-if="scope.row.overseasPromotion">{{scope.row.overseasPromotion}}海外推广</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateMenu(scope.row)"
            v-hasPermi="['car:package:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['car:package:remove']"
          >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="menuTotal>0"
      :total="menuTotal"
      :page.sync="queryParamsMenu.pageNum"
      :limit.sync="queryParamsMenu.pageSize"
      @pagination="getMenuList"
    />
<!--    流量包效果设置-->
    <el-row class="mb8 group-title"><el-col :span="24"><div>流量包效果设置</div></el-col></el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddEffect"
          v-hasPermi="['car:package:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loadingEffect" :data="packageEffectList" :height="maxTableHeight">
      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
      <el-table-column label="位置" align="center" prop="location"  width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="效果" align="left" prop="result" width="500" :show-overflow-tooltip="true"/>
      <el-table-column label="消费" align="center" prop="consume" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
<!--          {{$yun.priceFormatter(scope.row.packagePrice)}}-->
          {{scope.row.consume}}MB/小时
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateEffect(scope.row)"
              v-hasPermi="['car:package:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteEffect(scope.row)"
              v-hasPermi="['car:package:remove']"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalEffect>0"
      :total="totalEffect"
      :page.sync="queryParamsEffect.pageNum"
      :limit.sync="queryParamsEffect.pageSize"
      @pagination="getEffectList"
    />
    <!-- 添加或修改流量包对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="流量包名称" prop="packageName">
          <el-input class="modal-input" v-model="form.packageName" placeholder="请输入流量包名称" />
        </el-form-item>
        <el-form-item label="价格" prop="packagePrice">
          <el-input class="modal-input" v-model="form.packagePrice" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="赠送" prop="giftData">
          <el-input class="modal-input" v-model="form.giftData" placeholder="请输入赠送幅度" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <ImageUpload :limit="1" v-model="form.icon"></ImageUpload>
        </el-form-item>
        <el-form-item label="流量" prop="packageContent">
          <el-input class="modal-input" v-model="form.packageContent" placeholder="请输入流量内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改流量套餐包对话框 -->
    <el-dialog :title="titleMenu" :visible.sync="openMenu" width="800px" append-to-body @close="menuClose">
      <el-form ref="formMenu" :model="formMenu" :rules="rulesMenu">
        <el-form-item label="套餐包名称" prop="packageName">
          <el-input class="modal-input" v-model="formMenu.packageName" placeholder="请输入流量包名称" />
        </el-form-item>
        <el-form-item label="价格" prop="packagePrice">
          <el-input class="modal-input" v-model="formMenu.packagePrice" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <ImageUpload :limit="1" v-model="formMenu.icon"></ImageUpload>
        </el-form-item>
        <el-form-item label="套餐">
            <div v-for="(item,index) in checkedList" :key="index">
              <el-checkbox :label="item.title" v-model="item.checked" style="margin-right: 20px;width: 100px;margin-bottom: 15px"></el-checkbox>
              <el-input class="modal-input-mini" v-model="item.packageContent" placeholder="" /> {{item.title1}}
            </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormMenu">确 定</el-button>
        <el-button @click="cancelMenu">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改流量包效果 -->
    <el-dialog :title="titleEffect" :visible.sync="openEffect" width="800px" append-to-body>
      <el-form ref="formEffect" :model="formEffect" :rules="rulesEffect">
        <el-form-item label="位置" prop="location">
          <el-input class="modal-input" v-model="formEffect.location" placeholder="请输入位置" />
        </el-form-item>
        <el-form-item label="效果描述" prop="result">
          <el-input type="textarea" class="modal-input" v-model="formEffect.result" placeholder="请输入效果描述" />
        </el-form-item>
        <el-form-item label="消费标准" prop="consume">
          <el-input  class="modal-input" v-model="formEffect.consume" placeholder="请输入消费标准" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormEffect">确 定</el-button>
        <el-button @click="cancelEffect">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPackage,
  getPackage,
  delPackage,
  addPackage,
  updatePackage,
  effectList,
  addEffect, updateEffect, delEffect, effectDetails
} from '@/api/store/flowManage'
import OssImagePreview from '@/components/ImagePreview/oss-image-preview.vue'
import Template from '@/views/setting/template/index.vue'
import { addList, updateList } from '@/api/user/list'
import { addFinancial, updateFinancial } from '@/api/financial/onlineList'

export default {
  name: "Package",
  components: { Template, OssImagePreview },
  data() {
    const validatorPackageContentAll = (rule, value, callback) => {
      if (this.formMenu.packageContent == null && this.formMenu.deliveryHomepage == null && this.formMenu.offStationPlatform == null && this.formMenu.overseasPromotion == null) {
        callback('套餐包内容不能为空')
      } else {
        this.$refs.formMenu.clearValidate(['packageContentAll'])
      }
    }
    return {
      maxTableHeight:'',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 流量包表格数据
      packageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      queryParams:{
        pageSize:10,
        pageNum:1,
        dataType:0
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
       /*  packageContent: [
          { required: true, message: "流量不能为空", trigger: "blur" }
        ], */
        packagePrice: [
          { required: true, message: "价格不能为空", trigger: "blur" }
        ],
        giftData: [
          { required: true, message: "是否删除不能为空", trigger: "blur" }
        ],
        icon: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "更新时间不能为空", trigger: "blur" }
        ]
      },
      // 遮罩层
      loadingEffect: true,
      // 总条数
      totalEffect: 0,
      // 流量包表格数据
      packageEffectList: [],
      // 弹出层标题
      titleEffect: "",
      // 是否显示弹出层
      openEffect: false,
      queryParamsEffect:{
        pageSize:10,
        pageNum:1
      },
      // 表单参数
      formEffect: {},
      // 表单校验
      rulesEffect: {
        location: [
          { required: true, message: "位置不能为空", trigger: "blur" }
        ],
        result: [
          { required: true, message: "下过描述不能为空", trigger: "blur" }
        ],
        consume: [
          { required: true, message: "消费标准不能为空", trigger: "blur" }
        ]
      },
      loadingMenu:false,
      menuPackageList:[],
      menuTotal:0,
      queryParamsMenu:{
        pageSize: 10,
        pageNum: 1,
        dataType:1
      },
      titleMenu:'',
      openMenu:false,
      formMenu:{
        deliveryHomepage:null,
        packageContent:null,
        offStationPlatform:null,
        overseasPromotion:null,
      },
      rulesMenu: {
        packagePrice: [
          { required: true, message: "价格不能为空", trigger: "blur" }
        ],
        icon: [
          { required: true, message: "套餐包图标不能为空", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "套餐包名称不能为空", trigger: "blur" }
        ]
      },
      checkedList:[{
        packageContent:'',
        title:'流量',
        title1:'MB',
        checked:false,
      },{
        packageContent:'',
        title:'带货首页推荐',
        title1:'次',
        checked:false,
      },{
        packageContent:'',
        title:'站外平台推广',
        title1:'次',
        checked:false,
      },{
        packageContent:'',
        title:'海外推广',
        title1:'次',
        checked:false,
      }]
    };
  },
  created() {
    this.calcTableHeight();
    this.getList();
    this.getMenuList();
    this.getEffectList();
  },
  methods: {
    //计算页面单个table高度
    calcTableHeight() {
      window.bodyHeight = document.documentElement.clienHeight || document.body.clientHeight;
      this.maxTableHeight = (window.bodyHeight - 300) / 3;
    },
    /** 查询流量包列表 */
    getList() {
      this.loading = true;
      listPackage(this.queryParams).then(response => {
        this.packageList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        packageName: null,
        packageContent: null,
        deliveryHomepage:null,
        offStationPlatform:null,
        overseasPromotion:null,
        icon:null,
        dataType:0,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加流量包";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPackage(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改流量包";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        console.log('valid',valid)
        if (valid) {
          updatePackage(this.form).then(response => {
            this.$modal.msgSuccess(this.form.id != null ? "修改成功" : '新增成功');
            this.open = false;
            this.getList();
          });
         /*  if (this.form.id != null) {
            updatePackage(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPackage(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          } */
        }else{
          this.$modal.msgError("必填项不能为空");
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除流量包编号为"' + ids + '"的数据项？').then(function() {
        return delPackage([ids] );
      }).then(() => {
        if(row.dataType==0){
          this.getList();
        }else {
          this.getMenuList();
        }
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 查询流量包列表 */
    getEffectList() {
      this.loadingEffect = true;
      effectList(this.queryParamsEffect).then(response => {
        this.packageEffectList = response.data.records;
        this.totalEffect = response.data.total;
        this.loadingEffect = false;
      });
    },
    // 取消按钮
    cancelEffect() {
      this.openEffect = false;
      this.resetEffect();
    },
    // 表单重置
    resetEffect() {
      this.formEffect = {
        id: null,
        location: null,
        result: null,
        consume: null,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAddEffect() {
      this.resetEffect();
      this.openEffect = true;
      this.titleEffect = "添加流量包";
    },
    /** 修改按钮操作 */
    handleUpdateEffect(row) {
      this.reset();
      const id = row.id || this.ids
      effectDetails(id).then(response => {
        this.formEffect = response.data;
        this.openEffect = true;
        this.titleEffect = "修改流量包";
      });
    },
    /** 提交按钮 */
    submitFormEffect() {
      this.$refs["formEffect"].validate(valid => {
        if (valid) {
          if (this.formEffect.id != null) {
            updateEffect(this.formEffect).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openEffect = false;
              this.getEffectList();
            });
          } else {
            addEffect(this.formEffect).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openEffect = false;
              this.getEffectList();
            });
          }
        }else{
          this.$modal.msgError("必填项不能为空");
        }
      });
    },
    /** 删除按钮操作 */
    handleDeleteEffect(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除流量包编号为"' + id + '"的数据项？').then(function() {
        return delEffect([id]);
      }).then(() => {
          this.getEffectList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //获取套餐包列表
    getMenuList:function() {
      this.loadingMenu = true;
      listPackage(this.queryParamsMenu).then(response=>{
        this.menuPackageList = response.data.records;
        this.menuTotal = response.data.total;
        this.loadingMenu = false;
      })
    },
    // 表单重置
    resetMenu() {
      this.formMenu = {
        id: null,
        packageName: null,
        packageContent: null,
        packagePrice: null,
        giftData:null,
        icon:null,
        dataType:1,
      };
      this.resetForm("formMenu");
    },
    //新增套餐包
    handleAddMenu:function() {
      this.resetMenu();
      this.openMenu = true;
      this.titleMenu = "添加套餐包";
    },
    //修改套餐包
    handleUpdateMenu:function(row) {
      this.resetMenu();
      const id = row.id || this.ids
      getPackage(id).then(response => {
        this.formMenu = response.data;
        this.openMenu = true;
        this.checkedList[0].packageContent = row.packageContent
        this.checkedList[1].packageContent = row.deliveryHomepage
        this.checkedList[2].packageContent = row.offStationPlatform
        this.checkedList[3].packageContent = row.overseasPromotion
        this.checkedList.forEach(item => {
          if (item.packageContent) item.checked = true
        })
        this.titleMenu = "修改流量包";
      });
    },
    //删除套餐包
    handleDeleteMenu:function(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除流量包编号为"' + ids + '"的数据项？').then(function() {
        return delPackage({ strings:[ids] });
      }).then(() => {
        this.getMenuList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //提交套餐包
    submitFormMenu() {
      this.$refs.formMenu.validate(valid => {
        if (valid) {
          let taocanBool = null;
          this.checkedList.forEach((item,index) => {
            if(item.packageContent) taocanBool = true
            if(item.checked){
              if(index == 0) this.formMenu.packageContent = item.packageContent;
              if(index == 1) this.formMenu.deliveryHomepage = item.packageContent;
              if(index == 2) this.formMenu.offStationPlatform = item.packageContent;
              if(index == 3) this.formMenu.overseasPromotion = item.packageContent;
            }
          })
          let bool = this.checkedList.find(item => {
            return item.checked == true
          })
          console.log('taocanBool',!taocanBool)
          if(!taocanBool) return this.$modal.msgError("请选择一项套餐");
          if(bool == undefined) {
            this.$modal.msgError("请选择一项套餐");
            return
          }
          updatePackage(this.formMenu).then(response => {
            this.$modal.msgSuccess(this.formMenu.id != null ? "修改成功" : '新增成功');
            this.openMenu = false;
            this.getMenuList();
          });
          /* if (this.formMenu.id != null) {
            updateMenu(this.formMenu).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openMenu = false;
              this.getMenuList();
            });
          } else {
            addMenu(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openMenu = false;
              this.getMenuList();
            });
          } */
        }else {
          this.$modal.msgError("必填项不能为空");
        }
      });
    },
    //取消套餐包
    cancelMenu:function() {
      this.openMenu = false;
      this.resetMenu();
    },
    // 清空checkedList
    menuClose(){
      this.checkedList=[{
        packageContent:'',
        title:'流量',
        title1:'MB',
        checked:false,
      },{
        packageContent:'',
        title:'带货首页推荐',
        title1:'次',
        checked:false,
      },{
        packageContent:'',
        title:'站外平台推广',
        title1:'次',
        checked:false,
      },{
        packageContent:'',
        title:'海外推广',
        title1:'次',
        checked:false,
      }]
    },
  }
};
</script>
<style scoped lang="scss">
.group-title {
  padding-top: 20px;
}
.content-row {
  padding-bottom: 10px;
}
</style>
